@import "../../styles/mixins/btn";
@import "../../styles/mixins/utils";
@import "../../styles/mixins/vars";

.message-notice-group {
    position: fixed;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    pointer-events: none;
    .message-notice {
        position: relative;
        background-color: #fff;
        border: solid 1px #ccc;
        border-radius: rem(5);
        margin-top: $d2;
        line-height: rem(30);
        width: rem(200);
        padding: $d1 $d5;
        pointer-events: all;
    }
    .iconfont {
        margin-right: $d1;
    }
    .icon-close {
        position: absolute;
        right: $d1;
        cursor: pointer;
    }
    .icon-info {
        color: $info
    }
    .icon-warn {
        color: $warning
    }
    .icon-error {
        color: $danger
    }
    .icon-check-circle {
        color: $success
    }
    &.top-left {
        align-items: flex-start;
        top: rem(20);
        left: rem(20);
    }
    &.top-center {
        top: rem(20);
        align-items: center;
    }
    &.top-right {
        align-items: flex-end;
        top: rem(20);
        right: rem(20);
    }
    &.bottom-left {
        top: auto;
        bottom: rem(20);
        left: rem(20);
        align-items: flex-start;
        .message-notice {
            position: relative;
        }
    }

    &.bottom-right {
        bottom: rem(20);
        top: auto;
        right: rem(20);
        align-items: flex-end;
        .message-notice {
            position: relative;
        }
    }

    &.bottom-center {
        bottom: rem(20);
        top: auto;
        align-items: center;
        .message-notice {
            position: relative;
        }
    }

    &.middle-center {

        align-items: center;
        justify-content: center;
    }
}
